/**
* 绑定设备数/活跃设备数
*/

<template>
    <div class="device-bind-content">
        <div class="device-content">
            <div class="title">
                <span class="span-1">绑定设备数/活跃设备数曲线及趋势图</span>
            </div>
            <slot name="timeSelect"></slot>
            <div v-auto-resize style="height: 460px;" ref="chartEl" class="chart-wrap" />
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import EchartsBase from '@/mixins/echarts-base'
import commonMixin from '@/mixins/common'
import AutoResize from '@/directive/echart-resizer'

let oChart
export default {
  name: 'ChartStageTrend',
  mixins: [EchartsBase, commonMixin],
  directives: {
    AutoResize
  },
  props: {
    deviceRegistActiveData: {
      type: Object
    }
  },
  watch: {
    deviceRegistActiveData (now, old) {
      if (now) {
        this.$nextTick().then(() => {
          oChart = echarts.init(this.$refs.chartEl)
          this.setOption(now)
        })
      }
    }
  },
  created () {

  },
  methods: {
    setOption (data) {
      // 活跃设备数
      let activeListHis = data.activeListHis.sort(this.dateDataBol('activeTime', true))
      let activeListHisData = []
      // 新增活跃设备数
      let activeListNew = data.activeListNew.sort(this.dateDataBol('activeTime', true))
      let activeListNewData = []
      // 设备绑定数
      let registListHis = data.registListHis.sort(this.dateDataBol('registTime', true))
      let registListHisData = []
      // 新增设备绑定数
      let registListNew = data.registListNew.sort(this.dateDataBol('registTime', true))
      let registListNewData = []
      let xAxisDataList = []
      this._.each(activeListHis, (item) => {
        xAxisDataList.push(item.activeTime)
        activeListHisData.push(item.activeCount)
      })
      this._.each(activeListNew, (item) => {
        activeListNewData.push(item.activeCount)
      })
      this._.each(registListHis, (item) => {
        registListHisData.push(item.deviceCount)
      })
      this._.each(registListNew, (item) => {
        registListNewData.push(item.deviceCount)
      })
      let option = {
        grid: {
          top: '15%',
          bottom: '16%'
        },
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true
            }
          }
        },
        legend: {
          data: ['绑定设备数', '活跃设备数', '新增绑定设备数', '新增活跃设备数'],
          top: '2%',
          left: '10',
          textStyle: {
            color: '#2125296',
            fontSize: 16
          }
        },
        xAxis: {
          data: xAxisDataList,
          axisLine: {
            show: true, // 隐藏X轴轴线
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          axisTick: {
            show: true // 隐藏X轴刻度
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 40,
            textStyle: {
              color: '#212529', // X轴文字颜色
              fontSize: 16
            }
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(250,250,250,0.1)', 'rgba(250,250,250,0)']
            }
          }
        },
        yAxis: [{
          name: '设备数/台',
          'nameTextStyle': {
            'color': '#2CD9C5',
            'fontSize': 16
          },
          type: 'value',
          splitLine: {
            show: false
          },
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E9EBF1',
              width: 2
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#212529',
              fontSize: 16
            }
          }

        },
        {
          name: '新增数/台',
          'type': 'value',
          'nameTextStyle': {
            'color': '#2CD9C5',
            'fontSize': 16
          },
          'splitLine': {
            'show': false
          },
          'axisTick': {
            'show': true
          },
          'axisLine': {
            'show': true,
            'lineStyle': {
              'color': '#E9EBF1',
              'width': 2
            }
          },
          'axisLabel': {
            'show': true,
            'textStyle': {
              'color': '#212529',
              'fontSize': 16
            }
          }
        }
        ],
        series: [{
          name: '绑定设备数',
          type: 'line',
          yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#2CD9C5',
            borderColor: '#2CD9C5',
            width: 2

          },
          lineStyle: {
            color: '#2CD9C5',
            width: 2

          },

          data: registListHisData
        }, {
          name: '活跃设备数',
          type: 'line',
          yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          smooth: true, // 平滑曲线显示
          showAllSymbol: true, // 显示所有图形。
          symbol: 'circle', // 标记的图形为实心圆
          symbolSize: 8, // 标记的大小
          itemStyle: {
            // 折线拐点标志的样式
            color: '#8C54FF',
            borderColor: '#8C54FF',
            width: 2

          },
          lineStyle: {
            color: '#8C54FF',
            width: 2

          },

          data: activeListHisData
        },
        {
          name: '新增绑定设备数',
          type: 'bar',
          yAxisIndex: 1,
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#74DAC1'
              },
              {
                offset: 1,
                color: '#74DAC1'
              }
              ]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#74DAC1'
              },
              {
                offset: 1,
                color: '#74DAC1'
              }
              ]),
              borderWidth: 2
            }
          },
          data: registListNewData
        },
        {
          name: '新增活跃设备数',
          yAxisIndex: 1,
          type: 'bar',
          barWidth: 15,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#758BFF' }, { offset: 1, color: '#758BFF' }]),
              borderWidth: 2
            }
          },
          data: activeListNewData
        }
        ]
      }
      oChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
    @import "@/assets/scss/modules/variables-module.scss";
    @import "@/assets/scss/modules/common-module.scss";
    .device-bind-content{
        @include device-content;
        .chart-wrap {
            width: 100%;
            height: 100%;
        }
    }

</style>
